<template>
  <div id="#app">
    <!--1.1 使用A模块得state数据-->
    <p>{{$store.state.moduleA.username}}</p>
    <!--1.2 使用A模块得getters数据-->
    <p>{{$store.getters.newName}}</p>
    <!--1.2 使用A模块得mutations数据-->
    <button @click="$store.commit('updateName')">mutationsFn</button>
    <!--2.1 使用B模块得state数据-->
    <p>{{$store.state.moduleB.username}}</p>
    <!--2.2 使用B模块得getters数据 前面是模块名 后面是命名空间-->
    <p>{{$store.getters['moduleB/newName']}}</p>
    <!--2.3 使用B模块得mutations数据-->
    <button @click="mutationsFn">mutationsFn</button>
    <!--2.4 使用B模块得actions数据-->
    <button @click="actionsFn">actionsFn</button>
  </div>
  <router-view/>
</template>
<script>
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup () {
    const store = useStore()
    const mutationsFn = () => {
      // 2.3 提交B模块的修改
      store.commit('moduleB/updateName')
    }
    const actionsFn = () => {
      // 2.4 提交B模块的actions
      store.dispatch('moduleB/updateName')
    }
    return { mutationsFn, actionsFn }
  }
}
</script>
